<template>
  <div class="visitorpie">
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="区域" width="120">
        <template slot-scope="scope">{{ scope.row.area }}</template>
      </el-table-column>
      <el-table-column prop="time" label="时间" width="120">
      </el-table-column>
      <el-table-column prop="peakPerd" label="尖时段" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="ptimePerd" label="峰时段" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="normalPerd" label="平时段" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="valleyPerd" label="谷时段" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="fullTime" label="全时段" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="小计" width="120">
        <template slot-scope="scope">{{ scope.row.count }}</template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

export default {
  mounted() {
    this.refreshData()
  },
  props: ['visitorKey'],
  components: {
  },
  data() {
    return {
      tableData: this.tableData,
      multipleSelection: [],
      tableData: [{
        area: '良信园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '良信园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '良信园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '良信园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '良信园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }],
      tableDataSecond: [{
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }, {
        area: '园区',
        time: '2016-05-03',
        peakPerd: 7607.0,
        ptimePerd: 6153.0,
        normalPerd: 1113.0,
        valleyPerd: 3563.0,
        fullTime: 2193.0,
        count: 10768.0
      }],
    }
  },
  methods: {
    refreshData() {
      this.tableData = this.visitorKey ? this.tableDataSecond : this.tableData
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  watch: {
  }
}
</script>

<style lang="less">
@import '../style/mixin';

.visitorpie {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
